<%--
  Created by IntelliJ IDEA.
  User: 15273550
  Date: 2021/5/2
  Time: 6:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
<button id="startBtn">start game</button>
<button id="hitBtn" class="choose">hit</button>
<button id="standBtn" class="choose">stand</button>
<button id="restartBtn" class="choose">restart</button>
<button id="resetBtn" class="choose" onclick="window.location.reload();">reset</button>
<p id="statsBanner" style="color: blue"></p>
<p id="resultBanner" style="color: red"></p>
<div id="hands">
    <div id="dealer_hands">dealer's hands:</div>
    <div id="dealer_area">&nbsp;
        &nbsp;
    </div>
    <div id="player_hands">player's hands:</div>
    <div id="player_area">&nbsp;
        &nbsp;
    </div>
</div>

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="static/poker.min.js"></script>
<script>
    // var cardsPlayer,cardsDealer;
    var suits = ['hearts', 'diamonds', 'spades', 'clubs'];
    var points = ['a', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'j', 'q', 'k'];
    (function () {
        $("#hands").hide();
        $(".choose").hide();
        $('#startBtn').bind('click', function () {
            startGame();
        });
        $('#restartBtn').bind('click', function () {
            startGame();
            $("#resultBanner").text("");
        });
        $('#hitBtn').bind('click', function () {
            hitChoosed();
        });
        $('#standBtn').bind('click', function () {
            standChoosed();
        });
        setInterval(function () {
            updateStats();
        }, 2000)
    })();

    function startGame() {
        $.ajax({
            type: "POST",
            url: "jack/start",
            // data: {username: $("#username").val(), content: $("#content").val()},
            dataType: "json",
            success: function (data) {
                //console.log(data);
                if (data.status === 0) {
                    $("#startBtn").hide();
                    updateState();
                } else {
                    alert(data.msg);
                }
            }
        });
    }

    function showCards(ele, cards, check) {
        //console.log(cards);
        if (window.Poker) {
            $("#" + ele).empty();
            var container = document.getElementById(ele);
            var domCanvas = document.createElement('canvas');
            var canvas = domCanvas.getContext('2d');
            container.appendChild(domCanvas);
            domCanvas.height = 200;
            domCanvas.width = 1200;
            for (let i = 0; i < cards.length; i++) {
                if (cards[i].hidden && check) {
                    canvas.drawPokerBack((i + 1) * 50, 20, 150, '#5C72C2', '#2B4299');
                } else {
                    canvas.drawPokerCard((i + 1) * 50, 20, 150, transferSuits(cards[i].color), transferPoint(cards[i].point));
                }
            }
        }
    }

    function transferSuits(suit) {
        //console.log("suit:", suit);
        if (suit === 'HEART') {
            return suits[0]
        } else if (suit === 'SPADE') {
            return suits[2]
        } else if (suit === 'DIAMOND') {
            return suits[1]
        } else {
            return suits[3]
        }
    }

    function transferPoint(point) {
        if (point <= 10 && point > 1) {
            return point;
        } else {
            switch (point) {
                case 1 :
                    return "a";
                case 11 :
                    return "j";
                case 12 :
                    return "q";
                case 13 :
                    return "k";
            }
            ;
        }
        return "";
    }

    function hitChoosed() {
        $.ajax({
            type: "POST",
            url: "jack/move/hit",
            success: function (data) {
                // console.log("data: ", data);
                updateState();
            }
        });
    }

    function standChoosed() {
        $.ajax({
            type: "POST",
            url: "jack/move/stand",
            success: function (data) {
                // console.log("data: ", data);
                updateState();
            }
        });
    }

    function updateState() {
        $("#hands").show();
        $.ajax({
            type: "GET",
            url: "jack/state",
            success: function (stateRes) {
                wonOrNot(stateRes);
            }
        });
    }

    function updateMoves(options) {
        $(".choose").hide();
        $.each(options, function (index, value) {
            if (value === 'hit') {
                $("#hitBtn").show();
            } else if (value === 'stand') {
                $("#standBtn").show();
            }
        });
        $("#resetBtn").show();
        $("#restartBtn").show();
    }

    function wonOrNot(stateRes) {
        // let res1 = 'draw'
        $.ajax({
            type: "POST",
            url: "jack/won",
            success: function (res) {
                if (res === "draw") {
                    showCards("dealer_area", stateRes.data.cardsDealer, true);
                    showCards("player_area", stateRes.data.cardsPlayer);
                    $.ajax({
                        type: "GET",
                        url: "jack/possiblemoves",
                        success: function (res) {
                            console.log("res: ", res);
                            if (res.status === 0) {
                                updateMoves(res.data)
                            } else {
                                alert(res.msg)
                            }
                        }
                    });
                } else {
                    showCards("dealer_area", stateRes.data.cardsDealer, false);
                    showCards("player_area", stateRes.data.cardsPlayer);
                    $(".choose").hide();
                    $("#resetBtn").show();
                    $("#restartBtn").show();
                    $("#resultBanner").text("game over! " + res + " won!");
                }
            }
        });

    }

    function updateStats() {
        $.ajax({
            type: "GET",
            url: "jack/stats",
            success: function (res) {
                $("#statsBanner").text(res);
            }
        });
    }

</script>
<style>
    button {
        width: 100px;
        height: 30px;
        line-height: 20px;
        border-radius: 5px;
        color: blue;
    }
</style>
</body>
</html>
